<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<md-progress-linear md-mode="indeterminate" ng-show="diagnosticsController.isLoading"></md-progress-linear>
<div ng-show="!diagnosticsController.isLoading">
  <md-content class="diagnostics-content">

    <div layout="row" flex class="diagnostics-toolbar">
      <div layout="row" flex layout-align="center center">
        <div layout="row" layout-align="center center" class="diagnostics-toolbar-progress">
          <md-progress-circular ng-if="diagnosticsController.isInProgress()" md-theme="maincontent-theme" class="md-accent md-hue-2" md-mode="indeterminate" md-diameter="150">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isReady()" md-theme="maincontent-theme" class="md-hue-1" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isError()" md-theme="danger" class="md-accent md-hue-3" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isSuccess()" md-theme="chesave" class="md-accent md-hue-1" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
        </div>
        <div layout="column">
          <div ng-class="{'diagnostics-toolbar-main-title-success': diagnosticsController.isSuccess(), 'diagnostics-toolbar-main-title-error': diagnosticsController.isError(), 'diagnostics-toolbar-main-title-ready': diagnosticsController.isReady(), 'diagnostics-toolbar-main-title-progress': diagnosticsController.isInProgress(), 'diagnostics-toolbar-main-title-failure': diagnosticsController.isFailure()}" class="diagnostics-toolbar-main-title">{{diagnosticsController.globalStatusText}}</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isInProgress()">No Errors Found</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isSuccess()">All Tests Passed</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isError()">Error!</div>
          <che-button-default che-button-title="Start diagnostics"
                              che-button-icon="fa fa-play-circle-o"
                              ng-click="diagnosticsController.start()"
                              ng-if="diagnosticsController.isReady()"></che-button-default>
        </div>
      </div>
      <div layout="column" layout-align="center center">

        <div class="diagnostic-button" layout="row" layout-align="end center">
          <che-button-default che-button-title="Re run diagnostics"
                              che-button-icon="fa fa-play-circle-o"
                              ng-click="diagnosticsController.start()"
                              ng-if="diagnosticsController.isSuccess() || diagnosticsController.isError()"></che-button-default>
          <div ng-if="diagnosticsController.isInProgress()">&nbsp;</div>
        </div>
        <div class="diagnostic-button" layout="row" layout-align="end center">
          <che-button-default che-button-title="{{diagnosticsController.isLogDisplayed === false ? 'Show Logs' : 'Hide Logs'}}"
                              che-button-icon="fa fa-file-text-o"
                              ng-click="diagnosticsController.showLogs()"
                              ng-if="!diagnosticsController.isReady()"></che-button-default>
        </div>
      </div>
    </div>

    <div layout="row" flex class="diagnostics-action" layout-align="start start" flex>
      <div layout="column" flex="50"  ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0">
        <div flex  ng-repeat="part in diagnosticsController.parts" >
          <div class="diagnostic-part" ng-class="{'diagnostic-part-selected' : diagnosticsController.currentPart == part}" layout-align="center center" flex layout="row"  ng-click="diagnosticsController.setDetailsPart(part)">
            <div flex class="diagnostic-part-content" layout="column">
              <div layout="row" layout-align="start center">
                <div flex layout-align="start end" layout="row">
                  <div class="diagnostic-part-title"><i class="{{part.icon}}"></i> {{part.title}} - </div>
                  <div class="diagnostic-part-subtitle">
                    {{part.subtitle}}</div>
                </div>
                <div class="diagnostic-part-percent">{{(part.getNumberOfEndedCallbacks() / part.getNumberOfCallbacks()) * 100 | number:0}}%</div>
              </div>
              <div>
                <md-progress-linear ng-if="part.isInProgress()" md-theme="maincontent-theme" class="diagnostic-part-progress md-accent md-hue-2" md-mode="determinate" value="{{(part.getNumberOfEndedCallbacks() / part.getNumberOfCallbacks()) * 100 | number:0}}">
                </md-progress-linear>
                <md-progress-linear  ng-if="part.isReady()" md-theme="maincontent-theme" class="diagnostic-part-progress md-hue-1" md-mode="determinate" value="100">
                </md-progress-linear>
                <md-progress-linear ng-if="part.isError()" md-theme="danger" class="diagnostic-part-progress md-accent md-hue-3" md-mode="determinate" value="100">
                </md-progress-linear>
                <md-progress-linear ng-if="part.isSuccess()" md-theme="chesave" class="diagnostic-part-progress md-accent md-hue-1" md-mode="determinate" value="100">
                </md-progress-linear>
              </div>
              <div ng-if="part.getNumberOfEndedCallbacks() == 0" class="diagnostic-test-numbers">
                Initializing...
              </div>
              <div ng-if="part.getNumberOfEndedCallbacks() > 0" class="diagnostic-test-numbers">
                <span ng-if="part.isInProgress()">Testing</span><span ng-if="!part.isInProgress()">Tested</span> {{part.getNumberOfEndedCallbacks()}} of {{part.getNumberOfCallbacks()}}
              </div>
            </div>
            <div class="diagnostic-part-link-details" layout="row" layout-align="center center">
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
      <div layout="column" flex="50"  ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0">
        <div flex layout="row" layout-align="start start" >
          <md-content flex class="che-diagnostic-parent-list" che-auto-scroll ng-model="diagnosticsController.currentPart.items" md-scroll-y>
            <div flex class="che-list-diagnostic-empty-state" layout="row" layout-align="center start" ng-if="diagnosticsController.currentPart.items.length == 0">Testing {{diagnosticsController.currentPart.title}}. Wait for results.
            </div>
            <che-list flex class="che-list-diagnostic" ng-if="diagnosticsController.currentPart.items.length > 0">
              <che-list-item
                ng-repeat="item in diagnosticsController.currentPart.items"
                ng-mouseover="hover=true"
                class="che-list-item-diagnostic"
                ng-mouseout="hover=false">
                <div flex=
                       layout="column"
                     layout-align="start stretch"
                     class="che-list-item-row">
                  <div flex
                       layout-xs="row" layout-gt-xs="row"
                       layout-align-gt-xs="start start"
                       layout-align-xs="start start"
                       class="che-list-item-details">
                    <div class="che-list-item-name">
                      <i class="fa fa-circle-o check-item-icon check-item-icon-ready" ng-if="item.isReady()"></i>
                      <div class="check-spinner">
                        <div class="spinner" ng-if="item.isInProgress()">
                          <div class="rect1"></div>
                          <div class="rect2"></div>
                          <div class="rect3"></div>
                        </div>
                      </div>
                      <i class="fa fa-check check-item-icon check-item-ok" ng-if="item.isOk()"></i>
                      <i class="fa fa-circle check-item-icon check-item-ok" ng-if="item.isRunning()"></i>
                      <i class="fa fa-info check-item-icon check-item-hint" ng-if="item.isHint()"></i>
                      <i class="fa fa-exclamation-triangle check-item-icon check-item-fail" ng-if="item.isFailure()"></i>
                      <i class="fa fa-times check-item-icon check-item-ko" ng-if="item.isError()"></i>
                      <i class="fa fa-stop check-item-icon check-item-ko" ng-if="item.isAbort()"></i>
                    </div>
                    <div flex-gt-xs="70" layout="column">
                      <div ng-class="{'check-item-ok': item.isSuccess(), 'check-item-running': item.isRunning(), 'check-item-ko': item.isError(), 'check-item-fail': item.isFailure()}" >
                        {{item.title}}
                      </div>
                      <div class="diagnostic-item-message">{{item.message}}</div>
                      <div ng-if="item.hint" class="hint-item"><i class="fa fa-hand-o-right hint-item-icon"></i>Hint: {{item.hint}}</div>
                    </div>
                  </div>
                  <div flex layout-xs="column" layout-gt-xs="column"
                       layout-align-gt-xs="start start"
                       layout-align-xs="start start"
                       class="che-list-item-details">
                  </div>
                </div>
              </che-list-item>
            </che-list>
          </md-content>
        </div>
      </div>
    </div>

    <div ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0 && diagnosticsController.isLogDisplayed === true">
      <div class="diagnostic-log-title">Logs</div>
      <div flex ng-repeat="part in diagnosticsController.parts" class="diagnostic-log-part" layout="column">
        <div class="diagnostic-log-part-title" layout="row">{{part.title}} {{part.subtitle}} : {{part.stateToText()}}</div>
        <div ng-repeat="callback in part.callbacks" class="diagnostic-log-callback" layout="column">
          <div class="diagnostic-log-callback-title" layout="column">{{callback.name}}</div>
          <div class="diagnostic-log-callback-content" layout="row">{{callback.content}}</div>
          <div ng-repeat="item in callback.items" class="diagnostic-log-callback-item" layout="row">
            <div layout="row">
              <div>{{item.message}}</div>
              <div>&nbsp;---&nbsp;{{item.stateToText()}}</div>
            </div>
            <div class="diagnostic-log-item-hint" layout="row">{{item.hint}}</div>
          </div>
        </div>
      </div>
    </div>


  </md-content>
</div>
